<style>
	.canvas-container { display: inline-block; vertical-align: middle;}
</style>
<div style="width:600px;margin: 15px auto;">
	<div id="ecard_cast_frame1">
		<!--<div id="frame_mask" style="position:absolute;width:240px;height:300px;z-index:1000;"></div>-->
		<canvas id="c" width="224" height="296" style="border:1px solid #999;">
			Sorry, your web browser does not support Canvas content.
		</canvas>
	</div>
	<div class="controls">
		<p>
			<label>
				<span>Rotate:</span>
				<input type="hidden" id="h_angle-control" value="0">
			</label>
			<div id="angle-control" name="angle-control"></div>
		</p>
		<p>
			<label>
				<span>Scale:</span>
				<input type="hidden" id="h_scale-control" value="1">
			</label>
			<div id="scale-control" name="scale-control"></div>
		</p>
		<p style="margin-top:20px;">
			<input type="button" name="cast_next_btn" id="cast_next_btn" value="Next" style="padding:5px 10px;">
			<input type="button" name="cast_next_btn" id="cast_cancel_btn" value="Cancel" style="margin-left:15px;padding:5px 10px;">
		</p>
	</div>
</div>
<div class="clear"></div>
<form action="<?php echo site_url("pastephoto");?>" method="POST" id="castit_form">
	<textarea id="castit_image_data" name="castit_image_data" style="display:none;"></textarea>
</form>
<script>
var base_url = "<?php echo base_url();?>";
var photo_data = "<?php echo $photo_data;?>";
var cast_img = null;

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL(photo_data, function(img) {
	var mouse_offset_x = 0;
	var mouse_offset_y = 0;
    img.set({
      left: 112,
      top: 148,
	   
    });
	img.scale(0.3);
	img.hasControls = img.hasBorders = false;
	canvas.add(img);
	
	$("#angle-control").slider({
		min:-180,
		max:180,
		value: 0,
		slide: function(event, ui){
			$("#h_angle-control").val(ui.value);
			img.setAngle(ui.value).setCoords();
			canvas.renderAll();
		}
	});

	$("#scale-control").slider({
		min:0.1,
		max:5,
		value:0.3,
		step:0.1,
		slide: function(event, ui){
			$("#h_scale-control").val(ui.value);
			img.scale(ui.value).setCoords();
			canvas.renderAll();
		}
	});
	/*
	$("#angle-control").change(function(){
		img.setAngle($(this).val()).setCoords();
		canvas.renderAll();
	});

	$("#scale-control").change(function(){
		img.scale($(this).val()).setCoords();
		canvas.renderAll();
	});
	*/

	fabric.Image.fromURL(base_url+'content/images/mask.png', function(mask_img) {
		mask_img.set({
		  left: 112,
		  top: 148
		});
		mask_img.selectable = false;
		canvas.add(mask_img);
		mask_img.bringToFront();
		$("#cast_next_btn").click(function(){
			var angle = $("#h_angle-control").val();
			angle = -1 * angle;
			var scale = $("#h_scale-control").val();
			var scale1 = 1/scale;
			var left = img.getLeft();
			console.log(left);
			left1 = (112 - left) * scale1;
			var top = img.getTop();
			console.log(top);
			top1 = (148 - top) * scale1;
			img.set({
			  left: left,
			  top: top,
			  clipTo: function (ctx) {
				//ctx.arc(0, 0, 120, 0, Math.PI * 2, true);
				fnEllipse(ctx,left1,top1,56,74,angle,scale1);
			  }
			}).scale(scale);
			canvas.remove(mask_img);
			var image_data = $("#c").get(0).toDataURL();
			$("#castit_image_data").val(image_data);
			$("#castit_form").submit();
		});
	});
	
});

function fnEllipse(ctx,xC, yC, rW, rH, rotation, scale) {
	var x, y, inc;
	inc = 0.01 //value by which we increment the angle in each step
	rotation = Math.PI / 180 * rotation;
	rW = rW * scale;
	rH = rH * scale;
	x = xC + rW * Math.cos(rotation); // ...we will treat this as angle = 0
	y = yC + rW * Math.sin(rotation);

	ctx.moveTo(x, y); //set the starting position
	for (var angle = inc; angle<2*Math.PI; angle+=inc) { //increment the angle from just past zero to full circle (2 Pi radians)
		x = xC + rW * Math.cos(angle) * Math.cos(rotation) - rH * Math.sin(angle) * Math.sin(rotation);
		y = yC + rW * Math.cos(angle) * Math.sin(rotation) + rH * Math.sin(angle) * Math.cos(rotation);
		ctx.lineTo(x, y); //draw a straight line segment. if the increment is small enough, this will be
		//indistinguishable from a curve in an on-screen pixel array
	}
}

</script>